<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/search-result.css">
    <link rel="stylesheet" href="assets/fontAwesome/css/font-awesome.min.css">
    <script src="./assets/mui/js/mui.min.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 头部 -->
	<header class="mui-bar mui-bar-nav my-header">
		<h1 class="mui-title">乐淘云购</h1>
		<a class="mui-icon mui-icon-search mui-pull-right"></a>
    </header>
    <!-- 底部 -->
	<nav class="mui-bar mui-bar-tab my-footer">
		<a class="mui-tab-item mui-active" href="index.html">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="category.html">
			<span class="mui-icon mui-icon-bars"></span>
			<span class="mui-tab-label">分类</span>
		</a>
		<a class="mui-tab-item" href="cart.html">
			<span class="mui-icon fa fa-shopping-cart"></span>
			<span class="mui-tab-label">购物车</span>
		</a>
		<a class="mui-tab-item" href="user.html">
			<span class="mui-icon mui-icon-person"></span>
			<span class="mui-tab-label">会员中心</span>
		</a>
    </nav>
    
	<!--下拉刷新容器-->
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
        
            <!--数据列表-->
            <div class="mui-table-view mui-table-view-chevron" >
                <div class="mui-row">
                    <div class="mui-col-xs-6 mui-icon mui-icon-arrowdown " id="priceSort">
                        价格
                    </div>
                    <div class="mui-col-xs-6 mui-icon mui-icon-arrowdown ">
                        销量
                    </div>
                </div>
                
                <div class="sports">
                    <ul class="mui-clearfix" id="box">
                        <!-- <li>
                            <a href="#">
                                <img src="images/product.jpg" alt="">
                                <span>
                                    adidas阿迪达斯 男式 场下休闲篮球鞋S83700
                                </span>
                                <p>
                                    <em>¥560</em>
                                    <em>¥888</em>
                                </p>
                                <span class="btn-now">立即购买</span>
                            </a>
                        </li>-->
                        
                            
                    </ul>
                </div>                        
            </div>
        
    </div>
</body>
<script src="assets/zepto/zepto.min.js"></script>
<!-- <script src="js/catagory.js"></script> -->
<script src="assets/artTemplate/template-native.js"></script>
<script src="js/public.js"></script>

<script id="templateTpl" type="text/template">
    <% for(var i = 0; i<data.length;i++){%>
        <li>
            <a href="details.html?id=<%=data[i].id%>">
                <img src="<%=data[i].pic[0].picAddr%>" alt="">
                <span>
                    <%=data[i].proName%>
                </span>
                <p>
                    <em>¥<%=data[i].oldPrice%></em>
                    <em>¥<%=data[i].price%></em>
                </p>
                <span class="btn-now">立即购买</span>
            </a>
        </li>
    <% } %>
</script>
<script>
   
    $(function(){
       
        // return;
        // 获取地址栏中用户输入的关键字
        var keyword = getParamsByUrl(location.href, 'keyword');
        
        // console.log(keyword)
        //获取地址栏的关键字
        
        function getParamsByUrl(url,name){
            //url.indexOf("?") 获取问号的位置
            // console.log(url.indexOf("?"));
            var params = url.substr(url.indexOf("?")+1);//截取问号之后的字符串
            // console.log(params);
            var str = params.split("&");//以&符截取
            // console.log(str); //["keword=1", "name=2", "age=23"]
            //循环str
            for(var i = 0 ;i<str.length;i++){

                var arr = str[i].split("=");//以等号截取
                // console.log(arr);
                    // ["keword", "1"]
                    // ["name", "2"]
                    // ["age", "23"]
                //判断截取的数组中的第一个索引的值是不是name的值
                if(arr[0] == name){
                    return arr[1];//返回它的值
                }
                
            }
            return null;

        }
        // $.ajax({
        //     type:"get",
        //     url:"/product/queryProduct",
        //     data:{
        //         "page":1,
        //         "pageSize":6,
        //         "proName":keyword
        //     },
        //     success:function(res){
        //         // console.log(res);
        //         var html = template("templateTpl",res);
        //         $("#box").html(html);
        //     }
        // })
        var page = 1;
        var html = "";
        var priceSort = 1;//默认排序方式为升序

        mui.init({
            pullRefresh : {
                container:"#refreshContainer",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                up : {
                height:50,//可选.默认50.触发上拉加载拖动距离
                auto:true,//可选,默认false.自动上拉加载一次
                contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                callback :getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });
     
        function getData(){
            var This = this;
            //业务逻辑代码，比如通过ajax从服务器获取新数据；
            $.ajax({
                type:"get",
                url:"/product/queryProduct",
                data:{
                    "page":page++,
                    "pageSize":2,
                    "proName":keyword,
                    "price":priceSort
                },
                success:function(res){
                    // console.log(res);
                    //判断是不是还有 加载的数据

                    if(res.data.length > 0){
                        html += template("templateTpl",res);
                        $("#box").html(html);
                        This.endPullupToRefresh(false);
                    }else{
                        This.endPullupToRefresh(true);
                    }
                    
                }
            });
            //注意：
            //1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
            //2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
            
        }

        //价格排序
        $("#priceSort").on("tap",function(){
            //判断当前排序是升序还是降序
            //如果是升序,那么点击时切换成降序,如果是降序,点击就切换成升序
            priceSort = priceSort == 1 ? 2 : 1;
            page = 1;//排序默认一页
            html = "";//清空页面内容
            getData();
            //重置刷新
            //pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数；
            //注意：refresh()中需传入true
            mui('#refreshContainer').pullRefresh().refresh(true);
        });
        
    })
</script>
</html>